<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card class="full-width">
      <q-card-section>
        <div class="text-h6" v-if="mode==='create'">添加新应用</div>
        <div class="text-h6" v-if="mode==='update'">编辑应用</div>
      </q-card-section>
      <q-form
          @submit="save"
          class="q-gutter-md"
      >
        <q-card-section class="q-pt-none">
          <q-input class="q-mb-sm" bottom-slots @keydown.enter="fillSideInfo"
                   v-model="formData.appData.permalink"
                   :rules="[val=>!!val || '应用链接不可为空']"
                   label="链接" filled maxlength="256">
            <template v-slot:append>
              <q-btn round dense flat icon="add" @click="fillSideInfo"/>
            </template>
          </q-input>
          <q-input class="q-mb-sm" v-model="formData.appData.name"
                   filled label="名称"
                   :rules="[val=>!!val || '应用名称不可为空']"
          />
          <q-input class="q-mb-sm" type="textarea" v-model="formData.appData.description" filled label="介绍"/>
          <div class="q-mt-sm">
            <icon-upload v-model="formData.appData.icon"></icon-upload>
          </div>
          <q-inner-loading :showing="isDialogLoadingVisible">
            <q-spinner-gears size="50px" color="primary"/>
          </q-inner-loading>
        </q-card-section>
        <q-separator></q-separator>
        <q-card-actions align="right">
          <q-btn v-if="mode==='create'" color="green" type="submit" icon-right="add" class="full-width">确认添加</q-btn>
          <q-btn v-if="mode==='update'" type="submit">保存</q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>

import iUtil from 'src/api/util.ts'
import IconUpload from '../../../../components/IconUpload'
import form from '../../../../mixins/form'
import { cloneDeep } from 'lodash'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'

export default {
  name: 'AppCardEditForm',
  mixins: [form],
  components: {
    WidgetEditFormContainer,
    IconUpload
  },
  props: {
    widgetId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      isDialogLoadingVisible: false
    }
  },
  methods: {
    completeUrl () {
      const url = this.formData.appData.permalink
      if (!url) return
      if (!/^http|https/.test(url)) {
        this.formData.appData.permalink = url.replace(/^[/\\]*/, 'http://')
      }
    },
    async fillSideInfo () {
      this.completeUrl()
      const info = await iUtil.getSiteInfo({
        query: { url: this.formData.appData.permalink }
      }).loadingSwitch(this, 'isDialogLoadingVisible')
      this.formData.appData.name = info.title
      this.formData.appData.description = info.description
      this.formData.appData.icon = info.icon
    },
    save () {
      this.completeUrl()
      const formData = cloneDeep(this.formData)
      if (this.mode === 'update') {
        this.$store.dispatch('widget/updateApp', formData)
      }
      if (this.mode === 'create') {
        this.$store.dispatch('widget/addApp', {
          app: this.formData.appData,
          widgetId: this.widgetId
        })
      }
      this.formData = {
        appData: {
          name: '',
          description: '',
          permalink: '',
          icon: ''
        }
      }
      this.innerDialogShow = false
      this.$emit('submitted')
    }
  }
}
</script>

<style scoped>

</style>
